Ext.define("TT.process",{
	parent: null,
	constructor: function () {
		var arg = arguments[0];
		this.parent = arg.parent;
		this.createProcessPanel(arg.id, arg.title); 
    },
	 createProcessPanel:function(id, title){
		 var that = this;
		var panel = tabs[id];
		if(!panel){
			panel = Ext.create('Ext.panel.Panel', {
			    title:title,
			    layout:"border",
			    closable:true,
			    onRemoved: function(destroying) {
			    	delete tabs[id];
			    },
			    items:[
			    	{
			    		title:"", 
			    		region:"north", 
			    		height:60
			    	},
			    	{
			    		
			    		title:"输入", 
			    		region:"west",
			    		width:220, 
			    		collapsible: true,
			    		autoScroll:true,
			    		layout: {
			    	        type: 'vbox',
			    	        align: 'middle'
			    	    }
			    	},
			    	{
			    		title:"", 
			    		region:"center", 
			    		autoScroll:true
			    	},
			    	{
			    		title:"输出", 
			    		region:"east", 
			    		width:220,
			    		collapsible: true,
			    		autoScroll:true,
			    		layout: {
			    	        type: 'vbox',
			    	        align: 'middle'
			    	    }
			    	},
			    	{
			    		title:"工具和技术", 
			    		region:"south", 
			    		height:150,
			    		collapsible: true,
			    		/*
			    		items:[
							Ext.create("Ext.form.TextField",{fieldLabel:"a"}),
							Ext.create("Ext.form.TextField",{fieldLabel:"B"})
			    		]*/
			    		autoScroll:true,
			    		layout: {
			    	        type: 'vbox',
			    	        align: 'middle'
			    	    }
			    	}
			    	
			    ]
			});
			this.parent.add(panel);
			
			tabs[id] = panel;//{10001, p}
			
			Ext.Ajax.request({
			    url: "process/"+(id-10000)+".json",
			    params: {
			        id: 2
			    },
			    success: function(response){
			        var text = response.responseText;
			        var process = Ext.JSON.decode(text).process;
			        var item = panel.items.items;
			        var north = item[0];
			        var west = item[1];
			        var center = item[2];
			        var east = item[3];
			        var south = item[4];
			        
			        var html ="<div style='padding:5px;text-align:center'><h2 class=\"x-panel-header\">"+process.displayName+"</h2></div>";
			        north.body.update(html);
		
			        //html = "<div style='padding:10px;'>";
			        for(var i=0;i<process.inputs.length;i++){
			        	//html += "<li><a href=\"javascript:createInoutPanel("+(Number(process.inputs[i].id)+100)+", '"+process.inputs[i].name+"')\">"+process.inputs[i].name+"</a></li>";
			        	west.add({
			                xtype: 'button',
			                idx: i,
			                text: process.inputs[i].name,
			                margin: '3',
			                listeners: {
			                	click:function(){
			                		Ext.create("TT.inout",{id:Number(process.inputs[this.idx].id)+100, title:process.inputs[this.idx].name, parent:that.parent});
			                	}
				            }
			            });
			        }
			        //html += "</div>";
			        //west.body.update(html);
			        
			        html="<img src='images/"+process.pmbokId+".png' width='100%' />"
			        center.body.update(html);
			        
			        //html = "<div style='padding:10px;'>";
			        for(var i=0;i<process.outputs.length;i++){
			        	//html += "<li><a href=\"javascript:createInoutPanel("+(Number(process.outputs[i].id)+100)+", '"+process.outputs[i].name+"')\">"+process.outputs[i].name+"</a></li>";
			        	east.add({
			                xtype: 'button',
			                idx: i,
			                text: process.outputs[i].name,
			                margin: '3',
			                listeners: {
			                	click:function(){
			                		Ext.create("TT.inout",{id:Number(process.outputs[this.idx].id)+100, title:process.outputs[this.idx].name, parent:that.parent});
			                	}
				            }
			            });
			        }
			        //html += "</div>";
			        //east.body.update(html);
			        
			        //html = "<div style='padding:10px;'>";
			        for(var i=0;i<process.tools.length;i++){
			        	//html += "<li><a href=\"javascript:createToolPanel("+(Number(process.tools[i].id)+200)+", '"+process.tools[i].name+"')\">"+process.tools[i].name+"</a></li>";
			        	south.add({
			                xtype: 'button',
			                idx: i,
			                text: process.tools[i].name,
			                margin: '3',
			                listeners: {
			                	click:function(){
			                		Ext.create("TT.tool",{id:Number(process.tools[this.idx].id)+200, title:process.tools[this.idx].name, parent:that.parent});
			                	}
				            }
			            });
			        }
			        //html += "</div>";
			        //south.body.update(html);
			        
			    }
			});
		}
	
		this.parent.setActiveTab(panel);
	}
});